Skip to main content

Home/ Web Accessibility/ Group items tagged figure

Rss Feed Group items tagged

Filter: All | Bookmarks | Topics Simple Middle
Vernon Fowler

How do you figure? | scottohara.me - 0 views

www.scottohara.me/...how-do-you-figure.html

HTML5 markup accessibility screenreaders

shared by Vernon Fowler on 30 Jan 19 - No Cached
  • Vernon Fowler on 30 Jan 19
     
    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.
Sandra Earl

Thoughts around universal access on mobile from Accessibility 2.0 » iheni :: ... - 0 views

www.iheni.com/ess-on-mobile-accessibility-20

mobile accessibility design best practices

shared by Sandra Earl on 12 Oct 10 - Cached
  • Yahoo’s! graded browser support helps developers framework what browsers and versions they should target on desktop. This got me wondering if we need something similar for mobile. Seeing as Chris Heilmann from Yahoo! was sat in the audience I thought I might direct the question at him during the panel (also mentioned over Twitter) and being the thoroughly top bloke he is he listened. I know many larger orgnisations will have this sot of information fed into the test plans but for the large majority of us we have to figure it out as we go along. Not only that it’s such a fast changing target that it’s impossible to keep up with on your own.
  • Sandra Earl on 12 Oct 10
     
    "Yahoo's! graded browser support helps developers framework what browsers and versions they should target on desktop. This got me wondering if we need something similar for mobile. Seeing as Chris Heilmann from Yahoo! was sat in the audience I thought I might direct the question at him during the panel (also mentioned over Twitter) and being the thoroughly top bloke he is he listened. I know many larger orgnisations will have this sot of information fed into the test plans but for the large majority of us we have to figure it out as we go along. Not only that it's such a fast changing target that it's impossible to keep up with on your own."
Vernon Fowler

Breadcrumbs: 11 Design Guidelines for Desktop and Mobile - 0 views

www.nngroup.com/...breadcrumbs

navigation mobile

shared by Vernon Fowler on 18 Jul 19 - No Cached
  • 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.
    • Vernon Fowler
      Vernon Fowler on 18 Jul 19
       
      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.
    • Vernon Fowler
      Vernon Fowler on 18 Jul 19
       
      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...
  • Breadcrumbs aren’t necessary (or useful) for sites with flat hierarchies that are only 1 or 2 levels deep, or sites that are linear in structure.
  • Unfortunately, on mobile, the cost of using breadcrumbs can quickly overwhelm the benefits. Don’t use breadcrumbs that wrap to multiple lines.
  • Don’t use breadcrumbs that are too small or too crowded together.
  • Consider shortening the breadcrumb trail to include only the last level(s).
  • The Oregon state government website includes a breadcrumb trail, but omits a link to the homepage. However, in this case this is acceptable, as the site also includes a Home link in the global navigation
  • duplicating the Home link in both the global navigation and the breadcrumb trail is not recommended — one or the other is fine
  • This site’s structure is nonhierarchical, and so there is no need (or value) in including a breadcrumb trail.
  • MIT’s main website has a flat hierarchy, with only 1 page in each section. While it features a breadcrumb at the top of the page, this breadcrumb isn’t necessary. In the main navigation, the location of the page is highlighted.
  • Breadcrumbs should include only site pages, not logical categories in your IA.
  • The link to the parent page is a dropdown menu, with the current page’s siblings (bottom image). A better design would  have a separate UI for the local navigation, to enable users to travel to lateral pages in the current section of the site.
  • Breadcrumbs should not replace the global navigation bar or the local navigation within a section.
  • Breadcrumbs augment but do not replace those main forms of navigation.
  • when they skip some of these levels (for example, because they arrived to the site by clicking on an external link such as a search-engine result), breadcrumbs orient them and help them find their way to other, possibly more relevant, pages.
  • In this example, the home page and current page are omitted from the breadcrumb trail, which is not recommended.
Vernon Fowler

WebAIM: Alternative Text - 0 views

webaim.org/alttext

accessibility resources alt text images logos figure markup html

shared by Vernon Fowler on 27 Nov 13 - No Cached
  • Alternative text should not: be redundant (be the same as adjacent or body text). use the phrases "image of…" or "graphic of…".
  • Identifying the logo as actually being a logo (alt="Acme Company Logo") is not typically necessary.
  • If the fact that an image is a photograph or illustration, etc. is important content, it may be useful to include this in alternative text.
  • ...4 more annotations...
  • Decorative images do not present important content, are used for layout or non-informative purposes, and do not appear within a link. In almost all cases, spacer and decorative images should have null alt text (alt="").
  • In current practice on the web, many such images are given descriptive alternative text even though the images don't seem to provide useful content. Option C (alt="") would probably be most appropriate in this case because the image does not convey relevant or important content.
  • Alternative text should: presents the CONTENT and FUNCTION of the image. be succinct.
  • Decorative images still need an alt attribute, but it should be null (alt="").
Vernon Fowler

Bruce Lawson's personal site  : The practical value of semantic HTML - 0 views

www.brucelawson.co.uk/...actical-value-of-semantic-html

accessibility html mobile navigation

shared by Vernon Fowler on 25 Feb 19 - No Cached
  • 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...
  • First, choose the appropriate type attribute and element tag for your form controls. WebKit supports a variety of form control types including passwords, numeric and telephone fields, date, time, and select menus. Choosing the most relevant type attribute allows WebKit to present the most appropriate interface to handle user input.
  • unlike iOS and macOS, input methods on watchOS require full-screen interaction. Label your form controls or specify aria label or placeholder attributes to provide additional context in the status bar when a full-screen input view is presented.
  • By choosing the right semantics now, a machine that I don’t know about yet can understand my content and display it in the best way for its users.
  • Semantic HTML will give usability benefits to many users, help to future-proof your work, potentially boost your search engine results, and help people with disabilities use your site.
1 - 5 of 5
Showing 20▼ items per page