Group items tagged design - Web Accessibility

Liquid layouts get rid of the dreaded horizontal scrollbar
...

Cancel
Liquid layouts allow you to make full use of the area available in the viewport, showing more or less content, depending on what will fit at any given moment.
...

Cancel
Liquid layouts essentially allow users to choose the line length, or number of text characters per line of text, that is most comfortable for them to read.
...

Cancel
...1 more annotation...
If you have images that you think the user will want to get a closer look at, you can choose to scale only these images using easy CSS tricks. You can set up your images and CSS in such a way that the images will have little distortion or blurriness when scaled dynamically by the browser. The other images can all remain a constant size, so that they don’t get in the way of users with very large text and contribute to horizontal scrollbars, float drops, or other nasty things that can happen when you put huge images into web pages. And of couse, if a user does want to scale one of the non-scalable images, they can always use the browser zoom function as a backup method.
...

Cancel

shared by Vernon Fowler on 02 Aug 11 - Cached

shared by Vernon Fowler on 27 Jun 18 - No Cached

To recap, the placeholder attribute: Can’t be automatically translated; Is oftentimes used in place of a label, locking out assistive technology; Can hide important information when content is entered; Can be too light-colored to be legible; Has limited styling options; May look like pre-filled information and be skipped over.
...

Cancel
Move the placeholder content above the input, but below the label:
...

Cancel
Development Here’s how to translate our designed example to code:
...

Cancel
...4 more annotations...
aria-describedby ensures that the p content will be described last, after the label’s content and the kind of input it is associated with.
...

Cancel
By using aria-describedby to programmatically associate the input with the p element, we are creating a priority of information for screen readers that has parity with what a person browsing without a screen reader would experience.
...

Cancel
The floating label effect, a close cousin to this phenomenon, oftentimes utilizes the placeholder attribute in place of a label, as well.
...

Cancel
Content hidden by an on-screen keyboard. 3rd party keyboards with larger heights may have a greater risk of blocking important content.
...

Cancel

shared by Vernon Fowler on 04 Aug 17 - No Cached

shared by Vernon Fowler on 24 Apr 17 - No Cached

shared by Vernon Fowler on 10 Nov 17 - No Cached

shared by Vernon Fowler on 26 Mar 14 - No Cached

links are more useful when they make sense out of context
...

Cancel
In most cases, it is better to use human-readable text instead of the URL.
...

Cancel
The alternative text should convey the content of the image and the function of the link. In most cases, the content of the image and function of the link are the same, so this text can be very succinct (e.g, alt="Products").
...

Cancel
...6 more annotations...
When images are used as links, the alternative text performs the function of link text.
...

Cancel
on both mouse hover and keyboard focus
...

Cancel
they are also accustomed to seeing tabs and main navigational features (oftentimes created as graphics rather than text) without underlining. In these cases, the linked items should be designed so it is apparent that the user can click on them to perform an action.
...

Cancel
Authors should avoid non-informative link phrases such as: click here here more read more link to [some link destination] info
...

Cancel
adjacent links should have adequate whitespace (such as link CSS margins) between them to minimize users inadvertently clicking the wrong link
...

Cancel
an alphabetical index may use each individual letter of the alphabet as a link
...

Cancel

Group items tagged