No file selected
Your resource for web content, online publishing
and the distribution of digital products.
and the distribution of digital products.
Accessible Custom File Upload
The motivation for writing this article is to provide clear instructions on how to create a file upload that looks attractive. The native button looks very minimalistic, but it can be improved.
Unfortunately, there is no browser API that allows you to open the upload dialog without the input tag, so let's clarify how to do this.
\
- Pure JS - so it can be adapted to any framework;
- No native upload button - we want custom button instead
- Accessibility - strong trend of last several years
As I mentioned earlier, we still need to render an input with type="file" to support the browser API. Since we don’t want it to be visible, let’s hide it.
\ Here’s a code example in pure HTML/CSS/JS:
\
Important Details- Use semantic HTML tags. This will help readers understand the job better;
- For uploaded files, use role="status" and aria-live="polite". This way, the file upload message is accessible to users;
- Adding a trash icon with an aria-label helps screen readers identify its purpose, making the button more accessible;
- Using aria-describedby lets screen readers read content from another element, providing extra details about the component.
\
Screenshot for new button
With the above implementation, you can create an accessible and customizable file upload button. The design ensures the button looks good while maintaining accessibility standards. \n
The code and explanation should now be easier to read with corrected spelling and syntax.