check accessibility

[ramcdougal]

Yale guidelines: https://usability.yale.edu/web-accessibility/articles/wcag2-checklist

[goldiezhu]

guidelines that need to be checked:

Text

If a form field asks for information about the user and if there is an appropriate HTML autocomplete attribute, include that autocomplete attribute. Ensure that there is no loss of content or functionality when text resizes. *Define texts and text containers in relative units (percents, ems, rems) rather than in pixels.

Images

All img tags must have alt attributes. If short alt text is sufficient to describe an image, provide the short text via the image's alt attribute. If a short text alternative is not sufficient to describe an image (such as in a chart, graph, or diagram), provide short text via the image's alt attribute, and include a long description in nearby text. If an image or icon is used as a button or link, the image has a text alternative sufficient to describe the purpose of the button or link. Images that are decorative, used for formatting, or contain content already conveyed in text have a null alt attribute or are implemented as CSS background images. Frames and iframes have descriptive titles.

Links and other stuff

Minimize the number of adjacent links to the same destination by combining adjacent images and text into a single link, rather than creating a separate link for each element. Avoid emulating links and buttons. Use the a and button tags appropriately. Avoid using a tags for buttons. Avoid using div, span, etc. tags for links or buttons. If a form field asks for information about the user and if there is an appropriate HTML autocomplete attribute, include that autocomplete attribute. Provide easy ways to confirm, correct, or reverse a user action where a mistake would cause a serious real-world consequence (e.g. submitting financial data, entering into a legal agreement, submitting test data, or making a transaction).

[goldiezhu]

guidelines to follow:

Avoid using pixels for defining the height and spacing (e.g. height, line height, etc) of text boxes. Provide responsive stylesheets such that content can be displayed at 320px wide without horizontal scrolling. Create a logical tab order through links, form controls, and interactive objects. When inserting content into the DOM, insert the content immediately after the triggering element, or use scripting to manage focus in an intuitive way. When triggering dialogs and menus, make sure those elements follow their trigger in the focus order in an intuitive way. When content is dismissed or removed, place focus back on the trigger. Avoid using tab index values greater than 0. Identify errors using aria-invalid. Validate all page HTML, and avoid significant validation / parsing errors. Consistent component labeling *Ensure that the source order presents content meaningfully. When the page is viewed without styles, all content on the page should still appear in a meaningful and logical order.

[ramcdougal]

I didn't know about HTML autocomplete attributes. That's cool: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete

We can definitely do this with "email" and "name" when submitting a model at https://modeldb.science/submitmodel

[ramcdougal]

So the img alt tags are interesting... because there's the images that we use in the website itself which are relatively few... and the images in, say, readme files which is a curation task.