<>
La accesibilidad es un tema importante en el mundo online de hoy. Hoy en día, tener un sitio Web que mucha gente lucha por navegar es considerado inaceptable.
El marcado de ARIA es un paso en la dirección correcta. Es una respuesta a la pregunta de cómo puede hacer que su sitio web be más usable para las persons con discapacidades.
¿Qué es ARIA? Un conjunto de atributos de código que amplían las capacidades de HTML y facilitan la optimización de su sitio para los lectores de pantalla. Para ello, hace que partes de su sitio web sean visibles para la tecnología de asistencia, con la que, de lo contrario, estos dispositivos no podrían interactuar en absoluto.
Ready to include ARIA on your website? Or just curious to know more about the subject? In this article, we'll explain what ARIA is, how to make your site accessible, and give you the resources to learn more about this invaluable technology.
Why make your site accessible?
Some people might wonder: why bother about web accessibility? Is it really important to point out putting the resources to learn specs like ARIA? Is creating an accessible website really making a big impact?
Disability is not uncommon
Actually, yes. Disability is not that rare. 18.7% of Americans have some form of disability. Although not all of these factors will impair your ability to interact with the web, it is still a staggering number, and only includes people from the United States.
3.The 3% of Americans at the same time has a vision disorder. This means that they may have trouble viewing websites and may rely on tools such as screen readers. That at the same time is a significant percentage of your potential user base and includes the elderly and people with temporary disabilities.
People with disabilities need the Internet as much as anyone else. Many use it to shop, socialize, and find information. Sometimes it is your main, or even your only way of doing it.
The 54% of disabled people are online, and although this number is less than that of the general population, it is still a significant part.
A la vez, es 2019. En estos tiempos, debemos esforzarnos por incluir a todos los grupos de usuarios lo mejor que podamos. Dar a las personas con discapacidad acceso ilimitado para navegar por la web debería ser un target importante para cualquier desarrollador web.
At the same time, it even comes with personal benefits.
La accesibilidad se superpone con un buen Web design and SEO
A site that follows accessibility standards is often one that uses good web design principles, works best on mobile devices, and ranks high in SEO.
As an example, one of the WCAG standards does not include automatic playback of long audio clips without a way to stop the sound. This is already a big no-no for web designers. Another standard is to provide sufficient color contrast between items. Colors that are mixed on a website are often an indication of a bad palette.
As a result, following accessibility guidelines leads to a site that is better looking and easier to use. Can anyone say "win-win"?
La accesibilidad es al mismo tiempo una parte importante del SEO. Evitarlo puede llevar a penalizaciones de ranking de Google y otros search engines. Pero agregar texto alternativo a sus imágenes, incluyendo controles de teclado en items interactivos, y usar headers ayuda a los visitantes discapacitados y le da un impulso de SEO.
As you can see, making your site accessible is a good idea, as it impacts all user groups. If your goal is to design a website that gives everyone a good experience, then you should do everything you can to avoid excluding people with disabilities.
One thing you can do is implement ARIA in your design, so that people with screen readers can better find their way through your site.
What are screen readers?
Un lector de pantalla es un programa que lee el contents de una página o documento en voz alta mientras le posibilita navegar por él utilizando el teclado. Cualquiera puede descargar uno a su computadora, y hay una gama de programas disponibles gratuitos o de pago.
Some of them at the same time help to navigate the desktop and other programs, as well as websites. They can enlarge text and images for the visually impaired, and some can produce a braille display that can be refreshed. This guide explains how screen readers work.
Without screen readers, visually impaired people would have difficulty using a computer and the Internet, or would not be able to use them at all.
El marcado de ARIA juega un papel importante en el funcionamiento de estas herramientas. Proporciona información adicional, dándoles más opciones y la capacidad de interactuar con partes de la user interface que de otro modo serían invisibles para ellos.
But what exactly is ARIA and how can you improve your website by including it? Let's give a brief summary of this specification and how it works.
What is ARIA?
ARIA son las siglas de Accessible Rich Internet Applications. Es un conjunto de atributos que proporcionan un contexto adicional para la forma en que se presenta una página web y lo que hay dentro de ella. En otras palabras, proporcionan más información sobre partes de la interfaz de Username, como alertas emergentes, menús o incluso secciones completas de la página.
Si alguna vez ha visto un sitio web con las herramientas de desarrollo de browsers, es viable que lo haya visto antes.
<Subtítulos por aRGENTeaM
|
<Subtítulos por aRGENTeaM |
To quote the Mozilla documentation: "The supplemental landmark paper is used to designate a supporting section that relates to the main content, but can be independent when detached." In this way, basically, this part of the markup enables screen readers to know what part of the design they are dealing with.
En consecuencia, ARIA le posibilita crear interfaces y widgets accesibles sin tener que cambiar su aspecto ni su comportamiento en la parte frontal. La mayoría de las personas ni siquiera podrán darse cuenta de que el margen de beneficio está presente. Pero agregue un poco de código, y los lectores de pantalla podrán interactuar sin problemas con su interfaz.
When is ARIA really necessary?
Por defecto, los lectores de pantalla pueden comprender la mayoría de los items HTML y HTML5. Si tiene un sitio muy simple y estático, es viable que no necesite llevar a la práctica ARIA en absoluto. Pero algunos items Javascript, dinámicos e interactivos no pueden ser vistos por los lectores de pantalla, y aquí es donde entra en juego el marcado.
Other than this, you shouldn't use ARIA when what you are defining is already accessible. As an example, the HTML element it is recognized by screen readers. You do not need to have an ARIA button. You should only include functions when you are not using assistive device-compatible HTML items.
Along the same lines, technically I don't need to add the complementary role to a separate item, since they both describe the same thing. Despite everything, this profit margin is found very often, as in the previous case.
Are you still confused? Let's talk a little more about how ARIA works.
Understanding ARIA
Things can get very complex with ARIA, and it's easy to get overwhelmed. But the basics are pretty easy to break down. Once you understand them, you will learn more advanced concepts in the blink of an eye.
The ARIA markup is made up of three attributes: roles, states, and properties.
ARIA roles
Roles define items on a page, such as buttons and check boxes. They help screen readers determine what the parts of a page are doing, and they have four different subcategories: landmarks, documents, widgets, and abstract functions.
- Key features - Separate a site into different sections, such as main content, navigation, and supplementary areas. This can help your visitors find their bearings and find what they are looking for on a page more easily.
- Document functions- Describe specific sections within a page, such as articles, documents, lists, and rows.
- Widget roles - Determine items and interfaces. Tabs, text boxes, alerts and buttons are some of the items that ARIA can describe. When HTML does not define these items, or you are using a widget made of many different parts, the roles of the widgets can contribute.
- Abstract roles – Estos son utilizados por el browser. No debes de preocuparte por ellos.
States and Properties
States and properties work equivalently to each other. Properties once set rarely change, since they only describe relationships with other items. States are dynamic and can change on their own or with user interaction.
An example of a state is aria-busy, which tells the screen reader that the item is being updated. Another is the aria press, which indicates that a button has been pressed. These are items that can actively change.
Apart from this, the properties include attributes such as aria-valuemax that sets the maximum number in a range selector, or aria-haspopup that indicates that an element will trigger a popup. They are unlikely to be updated.
And that's the basics of ARIA. Much simpler once it breaks down, right? But you would be surprised how much you can do with it.
For more information, see the official WAI-ARIA documentation or Google's developer introduction for beginners.
ARIA Accessibility Testing
Once you've implemented ARIA, you might want to make sure everything works properly. How does your site actually look on assistive devices?
The most obvious way is to download a free screen reader like NVDA, blindfold yourself, and head to town. This will give you the full experience.
At the same time, you can skip the blindfold and hover over the items you want to check for ARIA attributes, but you'll miss out on key information such as how difficult it is to find those items.
Even this isn't a perfect representation of what it's like to use a screen reader, since it takes a lot of practice to learn, so it's best to ask real users to test your website.
At the same time there are many inspection tools such as the Firefox Accessibility Inspector that enables you to view information about the selected items. WAVE points out several bugs, including those with ARIA.
Lastly, this ARIA widget checklist is a great design audit tool.
Other ways to make your site accessible
ARIA trademarks are just the beginning when it comes to web accessibility. There are many other guidelines you must follow to make your site usable by people with vision, hearing, mobility, and other impairments.
Here are some examples of a handful of guidelines to follow.
- Website content is responsive and works while expanding.
- The site and its items can be used with a single keyboard.
- The text is duly contrasted with the background.
- All non-text content has text alternatives, including audio and video subtitles / transcripts.
- Make sure most images have descriptive alt text, and decorative images have empty alt text.
- No information is transmitted solely through sight, sound or color.
- Avoid auto-playing audio without the need for a mute button.
- Items that move automatically can be paused or stopped.
That's just a handful of what you can do to make your site truly accessible. If this seems like too much, try the simple accessibility checklist. Use it as the basis for your design before moving on to the more detailed WCAG guidelines.
Making your site usable for everyone
Avoiding accessibility can negatively impact your user base and even your reputation. People with disabilities make up a large percentage of web users, and it is important to ensure that most of the internet is not closed to them.
By practicing accessibility standards, including ARIA markup, screen reader users have the ability to see more of the web and grow their website as much as possible.
Once it is important it is important that you know how to include specifications like ARIA, accessibility will seem much less confusing. Making your website easier for everyone to use means more people will be willing to stay, so there is no reason not to use ARIA if your website needs it. Many themes at the same time offer it out of the box for now.
These standards help not only people with disabilities, but everyone. Accessibility guidelines often overlap with good web design practices and are quickly implemented once known.
So remember to include ARIA when you are developing a website. It is better for you and for all your users.
Have you ever had trouble navigating websites? What could web designers and developers do to improve the situation? Let us know about your experiences with online accessibility (or lack thereof) in the comments.!
2ZuOwar
