Inclusively Hidden | scottohara.me - 0 views
-
sometimes content is for decorative purposes only, and it would be optimal to not announce this content to assistive technology.
-
don’t use aria-hidden on focusable content
-
Purposefully Hidden from Assistive Technology
- ...1 more annotation...
-
There are various techniques to visually hide content in our web interfaces, but are you aware of the different effects they have on the accessibility of that content? While it would be nice if there was a single, native, solution for hiding content, there are contextual benefits to the various techniques at our disposal. Since there have been many articles already written about these techniques, over the many years they've been in use, the focus of this article will be to highlight the ones that are most appropriate for modern web development. We won't just look at the code behind each of these techniques, instead we'll focus on why each technique has its place, using practical examples to demonstrate their purposes. But before we talk about how to hide content we should ask ourselves a question… Why are we hiding content?
How do you figure? | scottohara.me - 0 views
-
A figure can be used with or without a figcaption. However, without a caption, or an alternate means of providing an accessible name (e.g. aria-label) a figure may not provide much value in conveying its semantics alone. In some cases, it may not convey any semantics at all if its given no accessible name.
Describing aria-describedby - 0 views
WebAIM: Usable and Accessible Form Validation and Error Recovery - 0 views
-
Errors on top
-
As one would guess, the "Errors on top" approach causes the error message to appear before the form. When presented, focus should generally be set directly to this error message. This allows screen reader and keyboard users to immediately access the error message without having to find it amongst the rest of the page contents. The message should also be visually apparent. Focus can be set to the message with client-side scripting using JavaScript focus() or similar, or the server-generated page can include an anchor name in the URI (e.g., http://myserver.com/form.php#errormessage) which will set focus directly to a named anchor or element id located at the beginning of the feedback message.
-
also helpful to inform the user as to the number of errors that were detected
- ...2 more annotations...
WebAIM: Keyboard Accessibility - 0 views
-
Long lists of links or other navigable items may pose a burden for keyboard-only users.
-
The following best practices can facilitate efficient keyboard navigation: Provide a "skip to main content" link on the page. Use a proper heading structure. Provide ARIA landmarks or HTML5 structural elements (<main>, <nav>, etc.)
Breadcrumbs: 11 Design Guidelines for Desktop and Mobile - 0 views
-
the breadcrumb corresponding to the current page should not be a link. You should never have a link that does nothing. The last breadcrumb (denoting the current page) should not be a link.
-
The breadcrumb denoting the current page SHOULD be a link and differentiated from others via mechanisms such as aria-current="page" See https://scottaohara.github.io/a11y_breadcrumbs/ for this pattern.
-
The breadcrumb denoting the current page SHOULD be a link and differentiated from others via mechanisms such as aria-current="page" See https://scottaohara.github.io/a11y_breadcrumbs/ for this pattern.
-
-
Include the current page as the last item in the breadcrumb trail.
-
Breadcrumb trails should start with a link to the homepage.
- ...14 more annotations...
Using the aria-labelledby attribute - Accessibility | MDN - 0 views
-
List multiple element IDs in a space delimited fashion.
HTML5 Accessibility Chops: section elements | The Paciello Group Blog - 0 views
-
The following table illustrates support and interaction features for a number of structural HTML elements. The information is based on support for these elements by the JAWS screen reader.
-
Recommended ARIA role mappings for HTML5 section elements
-
<header role=”banner”>
- ...1 more annotation...
A11yBuzz - 0 views
The Accessibility Project - 0 views
Favelets for Checking Accessibility - 0 views
WebAIM: Accessibility of AJAX Applications - Accessibility Issues - 0 views
-
AJAX is
-
a smorgasbord of web technologies put together to allow dynamic client-server interactions to occur in web applications without requiring pages to reload or refresh.
-
AJAX uses the following:
- ...13 more annotations...
WebAIM: Screen Reader Survey Results - 0 views
-
We received 1121 valid responses to the screen reader survey, which was conducted Dec. 2008 - Jan. 2009.
-
Skip to content22% Skip to main content28%
-
33 respondents (2.9%) reported being both deaf and blind.
- ...33 more annotations...
Bruce Lawson's personal site : The practical value of semantic HTML - 0 views
-
styles each header element differently depending on the value of its itemprop attribute. Using itemprop, we’re able to ensure that the author, publication date, title, and subheading are prominently featured.
-
If you plan to put things into microdata, please note that Apple, being Apple, go their own way, and don’t use a schema.org vocabulary here. Le sigh. See my article Content needs a publication date! for more. Or view source on this page to see how I’m using microdata on this article.
-
Apple WatchOS also optimises display of items wrapped in <figure> elements
- ...4 more annotations...
Validation messages - 0 views
-
If there are any validation messages, the focus is set to the first invalid input: this way, a screen reader will immediately announce the associated message, so the user knows that there is at least one invalid input to be fixed.
-
For multiple radio buttons or checkboxes, the message is associated to the surrounding <fieldset>.
-
In addition to this, each invalid input is associated to its message using aria-describedby. This is important, as it makes sure that screen readers also announce the messages when navigating through the inputs using the Tab key.
-
"Data submitted in a form is usually validated in some way. And if there is any unacceptable data, the form is traditionally re-displayed, together with validation messages. In such a case, it is important to immediately inform screen reader users, so they know that they have to look at their data and submit again. "
‹ Previous
21 - 39 of 39
Showing 20▼ items per page