accessibility posts - idmontie's Portfolio

/*@jsxRuntime automatic @jsxImportSource react*/
const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
function _createMdxContent(props) {
 const _components = Object.assign({
 p: "p",
 h2: "h2",
 a: "a",
 ul: "ul",
 li: "li",
 code: "code",
 em: "em"
 }, props.components);
 return _jsxs(_Fragment, {
 children: [_jsx(_components.p, {
 children: "This post was originally on a blog I started for creating web applications. This post goes into accessibility of web applications."
 }), "\n", _jsx(_components.h2, {
 children: "Is your site accessible via screen readers?"
 }), "\n", _jsx(_components.p, {
 children: "Check to make sure your website is navigable from screen readers."
 }), "\n", _jsxs(_components.p, {
 children: ["If you are using ", _jsx(_components.a, {
 href: "http://getbootstrap.com/",
 children: "Twitter Bootstrap"
 }), ", look into the ", _jsx(_components.a, {
 href: "http://paypal.github.io/bootstrap-accessibility-plugin/",
 children: "Bootstrap accessibility plugin"
 }), "."]
 }), "\n", _jsxs(_components.p, {
 children: ["If you are using ", _jsx(_components.a, {
 href: "http://foundation.zurb.com/",
 children: "Foundation"
 }), ", look into how ", _jsx(_components.a, {
 href: "http://zurb.com/article/1337/foundation-now-helps-you-build-accessible",
 children: "Foundation is built around accessibility"
 }), "."]
 }), "\n", _jsx(_components.h2, {
 children: "Do your Positive, Negative, and Neutral Buttons look different?"
 }), "\n", _jsxs(_components.p, {
 children: ["Image from ", _jsx(_components.a, {
 href: "http://uxmovement.com/buttons/how-button-color-contrast-guides-users-to-action/",
 children: "UX Movement"
 }), "."]
 }), "\n", _jsx(_components.p, {
 children: "Have your Positive Action buttons and your Neutral and Negative Action buttons look distinctly different. Notice that in the above example, not only are the colors different, but one is bordered and ther other is filled in, making it accessible to those with color-blindness."
 }), "\n", _jsx(_components.h2, {
 children: "HTML Tags"
 }), "\n", _jsxs(_components.ul, {
 children: ["\n", _jsxs(_components.li, {
 children: [_jsx(_components.code, {
 children: ""
 }), " - ", _jsx(_components.em, {
 children: "\"alternate voice\""
 }), "; transliterated foreign words, technical terms, and typographically italicized text."]
 }), "\n", _jsxs(_components.li, {
 children: [_jsx(_components.code, {
 children: ""
 }), " - ", _jsx(_components.em, {
 children: "\"stress emphasis\""
 }), "; something you'd pronounce differently."]
 }), "\n", _jsxs(_components.li, {
 children: [_jsx(_components.code, {
 children: ""
 }), " - ", _jsx(_components.em, {
 children: "\"stylistically offset\""
 }), "; keywords and typographically emboldened text."]
 }), "\n", _jsxs(_components.li, {
 children: [_jsx(_components.code, {
 children: ""
 }), " - ", _jsx(_components.em, {
 children: "\"strong importance\""
 }), ";"]
 }), "\n"]
 }), "\n", _jsxs(_components.p, {
 children: ["See ", _jsx(_components.a, {
 href: "http://html5doctor.com/i-b-em-strong-element/",
 children: "this HTML5 Doctor post"
 }), " for more information."]
 })]
 });
}
function MDXContent(props = {}) {
 const {wrapper: MDXLayout} = props.components || ({});
 return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
 children: _jsx(_createMdxContent, props)
 })) : _createMdxContent(props);
}
return {
 default: MDXContent
};

This post was originally on a blog I started for creating web applications. This post goes into accessibility of web applications.
<h2>Is your site accessible via screen readers?</h2>
Check to make sure your website is navigable from screen readers.
If you are using <a href="http://getbootstrap.com/">Twitter Bootstrap</a>, look into the <a href="http://paypal.github.io/bootstrap-accessibility-plugin/">Bootstrap accessibility plugin</a>.
If you are using <a href="http://foundation.zurb.com/">Foundation</a>, look into how <a href="http://zurb.com/article/1337/foundation-now-helps-you-build-accessible">Foundation is built around accessibility</a>.
<h2>Do your Positive, Negative, and Neutral Buttons look different?</h2>
Image from <a href="http://uxmovement.com/buttons/how-button-color-contrast-guides-users-to-action/">UX Movement</a>.
Have your Positive Action buttons and your Neutral and Negative Action buttons look distinctly different. Notice that in the above example, not only are the colors different, but one is bordered and ther other is filled in, making it accessible to those with color-blindness.
<h2>HTML Tags</h2>
<ul>
<li><code>&lt;i&gt;</code> - &quot;alternate voice&quot;; transliterated foreign words, technical terms, and typographically italicized text.</li>
<li><code>&lt;em&gt;</code> - &quot;stress emphasis&quot;; something you&#x27;d pronounce differently.</li>
<li><code>&lt;b&gt;</code> - &quot;stylistically offset&quot;; keywords and typographically emboldened text.</li>
<li><code>&lt;strong&gt;</code> - &quot;strong importance&quot;;</li>
</ul>
See <a href="http://html5doctor.com/i-b-em-strong-element/">this HTML5 Doctor post</a> for more information.

This post was originally on a blog I started for creating web applications. This post goes into accessibility of web applications.

## Is your site accessible via screen readers?

Check to make sure your website is navigable from screen readers.

If you are using [Twitter Bootstrap](http://getbootstrap.com/), look into the [Bootstrap accessibility plugin](http://paypal.github.io/bootstrap-accessibility-plugin/).

If you are using [Foundation](http://foundation.zurb.com/), look into how [Foundation is built around accessibility](http://zurb.com/article/1337/foundation-now-helps-you-build-accessible).

## Do your Positive, Negative, and Neutral Buttons look different?

Image from [UX Movement](http://uxmovement.com/buttons/how-button-color-contrast-guides-users-to-action/).

Have your Positive Action buttons and your Neutral and Negative Action buttons look distinctly different. Notice that in the above example, not only are the colors different, but one is bordered and ther other is filled in, making it accessible to those with color-blindness.

## HTML Tags

* `` - *"alternate voice"*; transliterated foreign words, technical terms, and typographically italicized text.
* `` - *"stress emphasis"*; something you'd pronounce differently.
* `` - *"stylistically offset"*; keywords and typographically emboldened text.
* `` - *"strong importance"*;

See [this HTML5 Doctor post](http://html5doctor.com/i-b-em-strong-element/) for more information.

Accessibility