Skip to main content

HTML

Elements

  • Landmark elements:
    • header, main, section, aside, footer (nest all other content in one of these
      • missing any?
    • Each needs a heading, even if visually hidden
      • Am I correct about including all content in one of these?)
  • An intro to the dialog element | Go Make Things • Two years ago, I wrote about how the alert(), prompt(), and confirm() methods were being deprecated. At the time, I lamented that there wasn’t a great replacement for any of them. That’s no longer the case. The dialog element is a native HTML element that you can use to create custom pop-up modals.
  • Anchor links:

Links:

Forms

Accessibility

Aria Roles

Aria Attributes

aria-current

  • use to denote current page (e.g. use attribute as css selector for underlining the current page’s nav link)?
  • saw that in eleventy blog template

From the MDN Web Doc for aria-current:

When you have a group of related elements, such as several links in a breadcrumb or steps in a multi-step flow, with one element in the group styled differently from the others to indicate to the sighted user that this is the current element within its group, the aria-current should be used to inform the assistive technology user what has been indicated via styling.

To denote which link in a list represents the current page, add aria-current="page" to the link element.

Other possible values are page, step, location, date, time, true, and false (the default). Any other non-empty value will be interpreted as “true”.

Beware of the difference between current and selected. Selected tabs, options, rows and gridcells are denoted by aria-selected, not aria-current.

aria-selected

SEO

Meta Tags

Structured Data

Pug

Inbox