Accessibility Auditing My Portfolio Site — Part 4

screenshot of the blog preview component on abbeyperini.dev in dark mode

The Problems

Uniformity, but with Meaning

function Error(props) {  const chooseComponent = (component) => {
props.chooseComponent(component);
}
return (
<section className=”container_blog”>
<h1 aria-label=”button to open full blog page” ><button className=”blog-section_title” onClick={() => chooseComponent(“FullBlog”)}>Blog</button></h1>
<div className=”container_error”>
<ConfusedShiba className=”error-graphic”/>
<p>There was an error! Try again later.</p>
</div>
</section>
)
}
export default Error

Totally Tabular

return (
<li key={blog.id} className=”preview”>
<button className=”preview_button” onClick={() => chooseComponent({id: blog.id})}>{blog.title}</button>
<img className=”preview_image” alt={altText} src={blogImage}></img>
</li>
)
screenshot of abbeyperini.dev in light mode with one of the blog preview title buttons focused

Horizontal Scrolling

return (
<section aria-label=”Blog Previews” className=”container_blog”>
<h1 aria-label=”button to open full blog page” ><button className=”blog-section_title” onClick={() => chooseComponent(“FullBlog”)}>Blog</button></h1>
<div className=”scroll-cropper”>
<ul aria-label=”previews of Abbey’s blog posts” className=”blog-preview”>
{blogPreviewList}
</ul>
</div>
</section>
)

It’s Not a Trap!

Conclusion

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Abbey Perini

Abbey Perini

…did someone say animated CSS button?