Keeping the camp fire toasty and the axe sharp
Keep in mind there are some behind the scenes goodies that users can’t really see (duh!)—unless they pop open dev tools or are using screen reader technology. (Meaning, you can see them.) It may seem a little odd that this fits under the sight category, but ARIA tags aid the semantics see by humans and screen readers.
Make sure that your images have alt tags. Please for the love of god put alt tags on your images. Guess what? Screen readers
READ the alt tags when used. It also provides a fallback when images aren’t loading and it helps with SEO. Do we have your scout’s honor?
Broken image with alt text
Go ahead and turn on Chrome Vox to read this page. Listen for what happens when it hits a broken image with alt text.
Broken image without alt text
Go ahead and turn on Chrome Vox to read this page. Listen for what happens when it hits a broken image without alt text.
The ARIA spec is hard to read, so below are some of the key points to understand from it to include in your code to make your content and interactions more compliant. Some HTML5 attributes have ARIA roles attached to them, some can be modified, others have to be specified explicitly—like hidden objects.
Here are some of the most usefule ARIA attributes to be used in HTML and javascript!
Aria attribute:
What it does:
aria-hidden="true"
Indicates that the element and all of its descendants are not visible or perceivable to any user. (Should be used with display none folks!)
aria-required="true"
The aria-required attribute is used to indicate that user input is required on an element before a form can be submitted. (Use when required is attached to your form input.)
aria-disabled="true"
Indicates that the element is perceivable but disabled, so it is not useable.
aria-readonly="true"
Points out that the element is not editable, but is otherwise operable.
aria-invalid="true"
Indicates the entered value does not conform to the format expected by the application. This should be dispatched when validating forms
aria-label="This is a label"
The aria-label attribute is used to define a text that labels the current element. Use it where a text label is not visible on the screen. If there is visible text labeling the element, use aria-labelledby instead.
aria-expanded="true"
Shows whether the element, or another grouping element it controls, is currently expanded or collapsed. (Dropdowns, accordions, etc.)
aria-checked="true"
Notates whether or not a button is pressed.
aria-labelledby="camp"
Think of it has the category of the list.
aria-selected="true"
If element is currently selected.
role="banner"
An area that contains content about the site.
role="contentinfo"
An area that contains info about the parent page.
role="alert"
A message with important information.
role="presentation"
An element that is purely presentational and has no other use.
role="group"
One SHOULD use a group to form logical collection of items. If they fit together thematically and semantically, add this attribute.
tabindex="0"
The tabindex attribute of 1+ hard sets the navigation order for focusable elements. Most often links and form controls. It should not be messed with unless the default is not ideal or the order cannot be change be rearranging the items.
If you'd like to read the entire spec, or learn more about aria attributes and roles visit ARIA in HTML
Scout Review
- Review the ARIA examples to make sure you are incorporating the most important into your markup. It’s not too hard, you just need to know what goes where.
- PUT CONTENT IN YOUR ALT TAGS.
