wiki.ryliejamesthomas.net

User Tools

Site Tools

Trace:
html

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
html [2022/07/07 17:12] – Soem aria roles rjthtml [2023/12/09 20:04] (current) – syntax fix rjt
Line 44: Line 44:
   * https://report-uri.com/   * https://report-uri.com/
   * https://csp-evaluator.withgoogle.com/   * https://csp-evaluator.withgoogle.com/
 +
 +==== Alternate Images ====
 +
 +Kinda cool, but I haven't had much luck with it, and the syntax is yuck, but you can provide multiple images in different sizes and fits and the browser can grab the best one for the readers situation. So small images for mobile, different dimensions for portrait or landscape modes...
 +
 +There are two ways to do this:
 +
 +  - A regular ''img'' element, with the ''srcset'' attribute.
 +  - A ''picture'' element, which is like an equibilant of the ''video'' and ''aaudio'' elements.
 +  
 +Rough notes:  
 +
 +  * srcset in img best support
 +  * srcset leaves choice to browser, picture is for control
 +  * srcset happens on page load, picture can change on the fly
 +  * srcset attribute in img element
 +
 +  * https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
  
 ===== Not-Cool Things ===== ===== Not-Cool Things =====
Line 79: Line 97:
   * If it's an image you can use ''role="img"'' to tell the screenreader.   * If it's an image you can use ''role="img"'' to tell the screenreader.
   * If your drawing's inside a ''<figure>'' you might want to use the ''aria-labelledby="[id]"'' or ''aria-describedby="[id]"'' attributes to point to the id on an element that has a description, for example a ''<figcaption>''   * If your drawing's inside a ''<figure>'' you might want to use the ''aria-labelledby="[id]"'' or ''aria-describedby="[id]"'' attributes to point to the id on an element that has a description, for example a ''<figcaption>''
 +
 +==== prefers-reduced-motion ====
 +
 +You can change that way things like animations play for people that have set certain preferences i ntheir browser or OS.
 +
 +  * https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion
  
 ===== Things I Forget ===== ===== Things I Forget =====
Line 99: Line 123:
 </code> </code>
  
-I'm always forgetting that ''<ins>'' is the element that pairs with ''<del>''.+I'm always forgetting that ''<ins>'' is the element that pairs with ''<del>''. Keep thinking it'll be something like replace (rel, rep??)
  
 ===== See Also ===== ===== See Also =====
  
   * [[html_editor]]   * [[html_editor]]
 +  * [[css]]
  
 {{tag>accessibility guide HTML hypermedia language markup-language}} {{tag>accessibility guide HTML hypermedia language markup-language}}
html.1657177933.txt.gz · Last modified: 2022/07/07 17:12 by rjt