Single HTML+CSS+JS+images file

Embedding everything in a normal HTML file is the way to go. Have you ever seen TiddlyWiki? I think I've seen it refered to as a "Single Page Application" - everything is embedded in one HTML file, so it functions as (well, almost) a stand alone piece of software. I don't use it, but I think it's technically quite impressive.

Images can be included inline using in base64 encoding using a Data URI. But support in Internet Explorer 8 is not complete (there's a size limit IIRC), and support missing entirely on older versions of IE. Most other modern browsers have good support.

Note that this will generally increase the size of the image by about a third (because you only "use" 6 out of every 8 bits per byte, so have to use a third more bytes to accomodate that gap).

For example, you get something like this:

<img src="data:image/png;base64,<BASE64 STRING>" />

Or this:

.someClass
{
    background-image:url(data:image/png;base64,<BASE64 STRING>");
}

You might also wish to have a read of the Wikipedia article on Data URIs, it has comments regarding browser support and some examples of usage.

I think the MHTML format (MIME HTML) (.MHT file extension) is probably what you are after. This embeds everything in a single file (much like an HTML email). Images etc. are embedded with base64 encoding.

Browser support is reasonable. IE and Opera can Save and View MHT files. In IE you simply "Save As..." and select "Web Archive, single file (*mht)". However, Firefox and Chrome require browser extensions.

Personally, I would probably upload the HTML content to a website (possibly password protected) and just distribute the link. MHT files are not exactly user editable, so require regeneration when you want to distribute. Once it's all been combined into an MHT file, is it still as accessible as HTML?

PDF is reasonably accessible. It has it's own screen reading capabilities. Not sure how it handles images though - unless may be you create this with a specific tool?